<%- include("header",{type:'signup'}) %>

<div class="container">
    <form class="form create" method="post">
        <div>
            <label>用户名:</label>
            <input type="text" name="username" placeholder="请输入用户名">
        </div>
        <div>
            <label>密码:</label>
            <input type="password" class="password" placeholder="请输入密码" name="password">
        </div>
        <div>
            <label>重复密码:</label>
            <input type="password" class="repeatpass" placeholder="请再次输入密码" name="repeatpass">
        </div>
        <div>
            <label> 上传图片:</label>
            <input type="file" name="avator" id="avator">
            <input type="hidden" id="avatorVal">
            <img class="preview" alt="预览头像">
        </div>
        <div class="submit">注册</div>
    </form>
</div>
<script>
    $(window).keyup(function (e) {
        if (e.keyCode == 13) {
            $('.submit').click();
        }
    })
    $('#avator').change(function () {
        if (this.files.length != 0) {
            let file = this.files[0];
            let reader = new FileReader();

            if (!reader) {
                this.value = '';
                return;
            }
            console.log('图片大小:' + file.size, file.type);
            if (!/image/g.test(file.type)) {
                fade("请上传图片文件!")
                $('#avatorVal').val('')
                $('form .preview').attr("src", '')
                $('form .preview').fadeOut()
                return
            }
            reader.onload = function (e) {
                this.value = '';
                $('form .preview').attr('src', e.target.result)
                $('form .preview').fadeIn()
                let image = new Image();
                image.onload = function () {
                    let canvas = document.createElement('canvas');
                    let ctx = canvas.getContext('2d');
                    canvas.width = 100;
                    canvas.height = 100;
                    ctx.clearRect(0, 0, 100, 100);
                    ctx.drawImage(image, 0, 0, 100, 100);
                    let blob = canvas.toDataURL("image/png");
                    $("#avatorVal").val(blob)
                }
                image.src = e.target.result
            };
            reader.readAsDataURL(file)
        };
    })

    $('.submit').click(function () {
        if ($('input[name=username]').val().trim() == '') {
            fade("请输入用户名")
        } else if ($('input[name=username]').val().match(/[<'">]/g)) {
            fade("请输入合法字符")
        } else if ($('#avatorVal').val() == ' ') {
            fade("请上传头像")
        } else {
            $.ajax({
                url: "/signup",
                data: {
                    name: $('input[name=username]').val(),
                    password: $('input[name=password]').val(),
                    repeatpass: $('input[name=repeatpass]').val(),
                    avator: $('#avatorVal').val(),
                },
                type: "POST",
                cache: false,
                dataType: 'json',
                success: function (msg) {
                    if (msg.code == 200) {
                        fade('注册成功')
                        setTimeout(function () {
                            window.location.href = "/signin"
                        }, 1000)

                    } else {
                        fade(msg.message)
                    }
                },
                error: function () {
                    alert('异常');
                }
            })
        }
    })
</script>

<% include footer %>